<template>
  <div class="SK-login">
    <div class="SK-form">
      <div class="SK-login-tabs">
        <div class="SK-login-tabs-change">
          <div class="left_login">
            <div class="login-tab-button login-tab-active">密码登录</div>
          </div>
        </div>
      </div>
      <div class="SK-form-body-wrapper">
        <div class="SK-form-body" :model="loginForm">
          <div class="form-input">
            <!-- id="login_name" -->
            <div>
              <input
                class="input-text"
                ref="username"
                v-model="loginForm.username"
                type="text"
                id="username"
                name="username"
                placeholder="用户名"
              />
            </div>
          </div>
          <div class="form-input">
            <div>
              <input
                class="input-text"
                type="password"
                name="password"
                ref="password"
                v-model="loginForm.password"
                id="password"
                placeholder="密码"
              />
            </div>
          </div>

          <div class="SK-button-com submit-btn">
            <button class="new_orange" @click="login">登录</button>
          </div>
          <div class="SK-form-block other-info">
            <router-link class="sign_up_btn right" to="/register"
              >未有账号?去创建</router-link
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    async login() {
      try {
        await this.$store.dispatch("userLogin", this.loginForm);
        let toPath = this.$route.query.redirect || "/home";
        this.$router.push(toPath);
      } catch (error) {
        alert(error.message);
      }
    },
  },
};
</script>

<style>
@import "../../assets/css/login.css";
</style>
